<template>
    <div class="page-wrap">
        <div class="page-title">cdsPageSelect 分页下拉选择框</div>
        <p class="page-description">下拉选择框，当选择项过多时，</p>
        <div class="page-sub-title">基本用法</div>
        <codeShow :code="code1">
            <CdsPageSelect
                    v-model="select"
                    filterable
                    :list="list"
                    :curentPageNum="curentPageNum"
                    :keyMap="keyMap"
                    :loadStatus="loadStatus"
                    :pageTotal="pageTotal"
                    @fnLoadmore="loadmore"
                    @change="fn"
                    >
            </CdsPageSelect><br/>
            选中的selected为：{{select}}
        </codeShow>
        <div class="page-sub-title">cdsPageSelect API</div>
        <el-table :data="cdsPageSelectTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
            <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
            <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
        </el-table>

        <div class="page-sub-title">cdsPageSelect 方法</div>
        * 所有方法和el-select一样
        <el-table :data="cdsPageSelectFnTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    import {CdsPageSelect} from 'cds-ui-business-components'
    import codeShow from '../../components/code.vue'
    import { ref } from 'vue'

    const code1 = `
             <CdsPageSelect
                    v-model="select"
                    filterable
                    :list="list"
                    :curentPageNum="curentPageNum"
                    :keyMap="keyMap"
                    :loadStatus="loadStatus"
                    :pageTotal="pageTotal"
                    @fnLoadmore="loadmore"
                    @change="fn">
            </CdsPageSelect><br/>
            选中的selected为：{{select}}

    const loadStatus = ref(false)
    const page = ref(1)
    const pageSize = ref(10)
    const pageTotal = ref(30)
    const curentPageNum = ref(10)
    const select = ref({})
    const list = ref([
        {'label': 'label1', 'value': '1'},
        {'label': 'label2', 'value': '2'},
        {'label': 'label3', 'value': '3'},
        {'label': 'label4', 'value': '4'},
        {'label': 'label5', 'value': '5'},
        {'label': 'label6', 'value': '6'},
        {'label': 'label7', 'value': '7'},
        {'label': 'label8', 'value': '8'},
        {'label': 'label9', 'value': '9'},
    ])
    const keyMap = ref({ // 对应的对象映射
        'value': 'id',
        'label': 'name',
    })
    select.value = list.value[0]

    const loadmore = () => { // 当下拉框的滚动条拖动到最底部时，调取的方法
        loadStatus.value = true
        // ajax http请求
        loadStatus.value = false
    }

    const fn = ()=>{
        console.log('已经修改')
    }

`;
    const cdsPageSelectTable = [
        {'attr': 'v-model', 'illustrate': '当前值', 'type': 'Object', 'default': '{}'},
        {'attr': 'list', 'illustrate': 'select列表', 'type': 'Array', 'default': '[]'},
        {'attr': 'curentPageNum', 'illustrate': '当前已经加载的数量', 'type': 'Number', 'default': '0'},
        {'attr': 'keyMap', 'illustrate': '对应的对象映射', 'type': 'Array', 'default': '[]'},
        {'attr': 'loadStatus', 'illustrate': '加载的状态', 'type': 'Array', 'default': '[]'},
        {'attr': 'pageTotal', 'illustrate': '总数', 'type': 'Number', 'default': '0'},
    ]
    const cdsPageSelectFnTable = [
        {'attr': 'fnLoadmore', 'illustrate': '当滚动条拖动到底时，调取的方法'},
    ]

    const loadStatus = ref(false)
    const page = ref(1)
    const pageSize = ref(10)
    const pageTotal = ref(30)
    const curentPageNum = ref(10)
    const select = ref({})
    const list = ref([
        {'label': 'label1', 'value': '1'},
        {'label': 'label2', 'value': '2'},
        {'label': 'label3', 'value': '3'},
        {'label': 'label4', 'value': '4'},
        {'label': 'label5', 'value': '5'},
        {'label': 'label6', 'value': '6'},
        {'label': 'label7', 'value': '7'},
        {'label': 'label8', 'value': '8'},
        {'label': 'label9', 'value': '9'},
    ])
    const keyMap = ref({
        'value': 'id',
        'label': 'name',
    })
    select.value = list.value[0]

    const loadmore = () => {
        loadStatus.value = true
        setTimeout(()=>{
            for(let i = 0; i < pageSize.value; i++) {
                let nPage = page.value
                let num = nPage * pageSize.value + i
                const newObj = {
                    value: num,
                    label: 'label' + num
                }
                list.value.push(newObj)
            }
            curentPageNum.value += Number(pageSize.value)
            loadStatus.value = false
            page.value++
        }, 5000)
    }

    const fn = ()=>{
        console.log('___________22')
    }

</script>

<style scoped>

</style>